<!-- 学分记录页面 -->

<template>
	
	<view :style="{'min-height': minHeight, 'background':'#f7f7f7'}">
		<focus-body mode="auto" >
		
		<!-- 顶部规则说明容器 -->
		<focus-box 
			mode="col" 
			width="750" 
			align="start" 
			justify="start" 
			:padding="[32,45]" 
		>
			<!-- 规则文字 -->
			<focus-text
				size="26"
				color="#888A8B"
				text="学时获取规则：学完每一小节的课程，并且做对该节的课后习题，就可以获取该小节的学时"
			></focus-text>
		</focus-box>
		
		<!-- 日期显示容器 -->
		<focus-box 
			width="750" 
			mode="col" 
			justify="start" 
			align="center"
		>
			
			<!-- <focus-box 
				v-if="[3,4,5].includes(Number(shortData.sentry_pid))"
				mode="row" 
				width="660" 
				radius="12"
				height="70" 
				align="center"
				justify="start" 
				:margin="[20,0]" 
				border="#E7E9EB" 
			>
				<focus-box width="70" height="70" mode="col" justify="center" align="center">
					<image style="width:30rpx; height:30rpx;" src="/static/img/history/calendar.png"></image>
				</focus-box>
				<picker 
					mode="date" 
					fields="year" 
					:start="timeRange.start" 
					:end="timeRange.end"
					:value="timeRange.year_value"
					@change="adminYearChange"
				>
					<focus-box 
						mode="row" 
						width="570" 
						height="70" 
						align="center"
						justify="center" 
					>
						<focus-text 
							size="28" 
							color="content" 
							weight="bold"
							:text="timeRange.year_value ? timeRange.year_value : '选择年份'"
						></focus-text>
					</focus-box>
				</picker>
				
			</focus-box> -->
			
			<!-- 日期选择容器 - 作业人员 -->
			<focus-box 
				width="660" 
				height="70" 
				mode="row" 
				justify="start" 
				align="center"
				:margin="[20,0]" 
				border="#E7E9EB" 
				radius="12"
			>
				
				<!-- 图标容器 -->
				<focus-box width="70" height="70" mode="col" justify="center" align="center">
					<image style="width:30rpx; height:30rpx;" src="@/pagesB/static/img/history/calendar.png"></image>
				</focus-box>
				
				<!-- 开始时间选择 -->
				<picker 
					mode="date" 
					fields="month" 
					:start="timeRange.start" 
					:end="endTime ? endTime : timeRange.end"
					:value="timeRange.start_value"
					@change="workStartChange"
				>
					<focus-box width="250" height="70" mode="row" justify="center" align="center">
						<focus-text size="28" color="content" weight="bold"
						:text="timeRange.start_value ? timeRange.start_value : '开始时间'"></focus-text>
					</focus-box>
				</picker>
				
				<!-- “至”文字 -->
				<focus-box width="70" height="70" mode="col" justify="center" align="center">
					<focus-text size="26" color="remark" text="至"></focus-text>
				</focus-box>
				
				<!-- 结束时间选择 -->
				<picker 
				mode="date" 
				fields="month"
				:start="startTime ? startTime : timeRange.start"
				:end="timeRange.end"
				:value="timeRange.end_value"
				@change="workEndChange">
					<focus-box width="250" height="70" mode="row" justify="center" align="center">
						<focus-text size="28" color="content" weight="bold"
						:text="timeRange.end_value ? timeRange.end_value : '结束时间'"></focus-text>
					</focus-box>
				</picker>
				
			</focus-box>
			
			<!-- 底部间隔线 -->
			<focus-line length="750" color="info-light"></focus-line>
			
		</focus-box>
		
		<!-- 时间轴容器 -->
		<view style="width:650rpx; padding:50rpx 0; margin-left:50rpx;">
			<!-- 时间轴 组件 -->
			<u-time-line>
				<!-- 循环时间轴列表 -->
				<block v-for="(item,index) in timeLine.list" :key="item.key">
					<!-- 一个时间点块级 -->
					<u-time-line-item>
						<!-- 自定义左边内容 -->
						<template v-slot:node>
							<view>
								<!-- 时间点 -->
								<focus-box 
									width="32" 
									height="32" 
									mode="col" 
									justify="center" 
									align="center"
									bg="#E4EDFF" 
									radius="16"
								>
								<!--:bg="index===0?'#FFE0D9':'#E4EDFF'"-->
									<focus-box 
										width="16" 
										height="16" 
										radius="8"
										bg='primary'
									></focus-box>
									<!--:bg="index===0?'#FE3001':'primary'"-->
								</focus-box>
							</view>
						</template>
						
						<!-- 自定义右边内容 -->
						<template v-slot:content>
							<view>
								<!-- 顶部空白间隔 -->
								<focus-box width="10" height="8"></focus-box>
								<!-- 时间行容器 -->
								<focus-box width="610" height="40" mode="row" justify="between" align="center">
									<text style="font-size: 32rpx;color: #000000;font-weight: 500"> 
									{{item.time}}
									</text>
								</focus-box>
								
								<view 
								v-for="(itm,idx) in item.data"
								:key="idx"
								style="width: 630rpx;
										height:150rpx;
										background: #ffffff;
										border-radius: 16rpx;
										box-sizing: border-box;
										padding: 24rpx;
										margin-top: 20rpx;"
								>
									<view v-if="itm.length">
										<view style="font-size: 28rpx;
													 font-family: PingFang SC, PingFang SC-6;
													 font-weight: 500;
													 text-align: left;
													 color: #262626;
													 margin-bottom: 24rpx;
													">
											{{itm[0].sentry_pid_name}}
										</view>
										<text v-if="itm.filter(it => it.is_must == 1).length" style="width: 280rpx;display: inline-block;">
											必修学时：{{itm.filter(it => it.is_must == 1)[0].sum_get_score}}
										</text>
										<text v-if="itm.filter(it => it.is_must == 0).length">
											选修学时：{{itm.filter(it => it.is_must == 0)[0].sum_get_score}}
										</text>
									</view>
								</view>
								<view
								v-if="!item.data.length"
								style=" 
									font-size:28rpx;
									font-family: PingFang SC, PingFang SC-5;
									font-weight: 400;
									text-align: center;
									color: #a6a6a6;
									line-height: 102rpx;
									width: 630rpx;
									height:150rpx;
									background: #ffffff;
									border-radius: 16rpx;
									box-sizing: border-box;
									padding: 24rpx;
									margin-top: 20rpx;
									"
								>
									暂无学时记录
								</view>
							</view>
						</template>
						
					</u-time-line-item>
					
				</block>
			</u-time-line>
		</view>
		
	</focus-body>
	</view>
</template>

<script>
	// 接口请求文件引入
	import request from '@/pagesB/common/js/request/userInfo.js';
	
	export default {
		
		// 页面数据
		data() {
			return {
				// 临时缓存
				shortData: {
					/* id: 24146, // 用户id
					sentry_pid: 2, // 身份标识：1-管理人员  2-作业人员 */
				},
				// 时间范围选择
				timeRange: {
					// 后端设置范围
					start: '',
					end: '',
					// 主动选择值 - 管理人员
					year_value: '',
					// 主动选择值 - 作业人员
					start_value: '',
					end_value: '',
				},
				// 时间抽数据信息
				timeLine: {
					list: [], // 列表数据
				},
				minHeight:"",
				startTime:"",//限制的开始时间
				endTime:''//限制的技术时间
			}
		},
		
		// 页面创建完成
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.minHeight = res.windowHeight+'px'
				}
			})
			// 获取临时缓存信息
			var short = uni.$focus.varShortTime('get');
			if (short) { this.shortData = short; }
			// 请求数据接口
			this.historyForStudyReq();
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			
			// ========================================= 元素事件
			// 管理人员选择年份变化
			adminYearChange(objD) {
				// 开始时间 赋值
				this.timeRange.year_value = objD.detail.value;
				// 重新请求学习记录
				this.historyForStudyReq();
			},
			
			// 作业人员开始时间变化
			workStartChange(objD) {
				// 开始时间 赋值
				this.timeRange.start_value = this.startTime = objD.detail.value;
				// 重新请求学习记录
				this.historyForStudyReq();
			},
			
			// 作业人员结束时间变化
			workEndChange(objD) {
				// 结束时间 赋值
				this.timeRange.end_value = this.endTime = objD.detail.value;
				// 重新请求学习记录
				this.historyForStudyReq();
			},
			
			// ========================================= 接口请求
			// 学习记录
			historyForStudyReq() {
				request.historyForStudy({
					data: {
						year: this.timeRange.year_value, // 年份 例 2021
						start_date: this.timeRange.start_value, // 开始时间段 例2021-01
						end_date: this.timeRange.end_value, // 结束时间段 例2021-06
					},
					success: (res) => {
						// 日期选择范围 赋值
						this.timeRange.start = res.time[res.time.length - 1];
						this.timeRange.end = res.time[0];
						// 时间轴列表数据 赋值
						this.timeLine.list = res.data;
					},
				});
			},
			
		},
		
	}
</script>
<style lang="less" scoped>
	/deep/ .u-time-axis-node{
		background-color: #f7f7f7 !important;
	}
	.itemTitleScore{
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
		box-sizing: border-box;
		padding: 0 0 0 10rpx;
		background: #EAF5FF;
		width:100%;
		border-radius: 16rpx;
	}
</style>